<!DOCTYPE html>
<html>
{% include 'www/header.html' %}
<style>
    .main-container {
        min-height: 100vh;
        background: #f8f9fa;
    }

    .section {
        margin: 2rem 0;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .preview-image {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }

    .preview-image:hover {
        transform: scale(1.02);
    }

    @media (max-width: 768px) {
        .section {
            margin: 1rem 0;
            border-radius: 8px;
        }
    }
</style>

<div class="main-container">
    <div class="layui-container-fluid" id="app">
        <!-- 幻灯片部分 -->
        <section class="section" id="slide">
            {% include 'www/slide.html' %}
        </section>

        <!-- 主体内容部分 -->
        <section class="section">
            {% include 'www/main.html' %}
        </section>

        <!-- 预览图片部分 -->
        <section class="section">
            <div class="preview-wrapper">
                <img class="preview-image" src="{{ url_for('static', filename='upload/software/preview_1.png') }}" alt="LaokNAS">
            </div>
        </section>
    </div>
</div>

{% include 'www/footer.html' %}
<script>
    // 幻灯片信息
    layui.use(['carousel', 'jquery', 'layer'], function(){
        var carousel = layui.carousel;
        var $ = layui.jquery;
        var layer = layui.layer;
        //获取幻灯片数据
        $.ajax({
            url: '/slides',
            type: 'GET',
            dataType: 'json',
            success: function (result) {
                if (result.code === 200) {
                    // console.log(result.data);
                    // 清空#slide_img原有的幻灯片内容
                     $('.slide_img').empty();
                    // 使用获取到的数据渲染幻灯片
                    result.data.forEach(item => {
                        // 创建一个新的div元素
                        let newDiv = document.createElement('div');
                        // item.image==#,则img元素等于第1张图片
                        if (item.image === '#') {
                            // 创建一个img元素
                            let imgElement = document.createElement('img');
                            // 设置img元素的src属性
                            imgElement.src = result.data[0].image; // 默认显示第1张图片
                            // console.log(item.image);
                            // 设置img元素的alt属性
                            imgElement.alt = result.data[0].title;
                            // 可以设置其他属性，如数据描述或标题
                            imgElement.setAttribute('data-description', item.description);
                            imgElement.setAttribute('data-title', item.title);

                            // 将img元素添加到新创建的div中
                            newDiv.appendChild(imgElement);
                        }else {
                            // 创建一个img元素
                            let imgElement = document.createElement('img');
                            // 设置img元素的src属性
                            imgElement.src = item.image;
                            // console.log(item.image);
                            // 设置img元素的alt属性
                            imgElement.alt = item.title;
                            // 可以设置其他属性，如数据描述或标题
                            imgElement.setAttribute('data-description', item.description);
                            imgElement.setAttribute('data-title', item.title);
                            // 将img元素添加到新创建的div中
                            newDiv.appendChild(imgElement);
                        }               
                        // 创建一个新的div元素，用于显示标题和描述
                        let contentDiv = document.createElement('div');
                        contentDiv.className = 'slide_content';

                        // 创建一个新的div元素，用于显示标题
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'slide_title';
                        titleDiv.textContent = item.title;

                        // 创建一个新的div元素，用于显示描述
                        let descDiv = document.createElement('div');
                        descDiv.className = 'slide_desc';
                        descDiv.textContent = item.description;

                        // 将标题和描述添加到内容div中
                        contentDiv.appendChild(titleDiv);
                        contentDiv.appendChild(descDiv);

                        // 将内容div添加到新创建的div中
                        newDiv.appendChild(contentDiv);

                        // 将新创建的div添加到.slide_img中
                        $('.slide_img').append(newDiv);
                    });
                     // 初始化幻灯片
                    carousel.render({
                            elem: '#slide-carousel',
                            width: '100%',
                            height: '600',
                            arrow: 'hover',
                            interval: 3000,
                            indicator: 'inside', //指示器位置
                            anim: 'fade' //切换动画方式
                      
                        });
                } else {
                    layer.msg(result.msg, { icon: 2, time: 6000 });
                }
            },
            error: function (xhr, status, error) {
                layer.msg('请求失败，请稍后重试', { icon: 2, time: 6000 });
            }
        });
    });
</script>

<script>
    // 发布软件信息
    layui.use([ 'jquery', 'layer'], function () {
      let $ = layui.jquery;
      let layer = layui.layer;
    let MODULE_PATH = '/';
    $.ajax({
        url: MODULE_PATH + 'software',
        contentType: 'application/json',
        data:{
            filename: '站距计算器DBSPTools'
        },
        type: 'get',
        success: function (result) {
        if (result.code === 200) {
            // console.log(result.data); 
            // 打印查询结果
            // { "count": 0, "description": "测试", "enable": 1, "filename": "测试软件", "id": 1, "size": "29mb", "upload_time": "2024-08-08 00:00:00.000000", "url": "/", "version": "1.0" }
            // 更新HTML内容
            $('#software_name').text(result.data.filename);
            $('#software_version').text(result.data.version);
            $('#software_size').text(result.data.size);
            $('#software_platform').text(result.data.platform);
            // 截取日期前10位
            $('#software_update_date').text(result.data.upload_time.substring(0, 10));
            $('#software_description').text(result.data.description);
            // 更新下载链接（假设下载链接在result.data.url中）
            // $('#layui-btn-download').attr('href', result.data.url);
            $('#download_count_num').text(result.data.count);
            // layer.msg(result.msg, { icon: 1, time: 2000 });
         }  // else {
        //     layer.msg(result.msg, { icon: 2, time: 6000 });
        // }
        },
        error: function (xhr, status, error) {
            layer.close(loading);
            layer.msg('请求失败，请稍后重试', { icon: 2, time: 6000 });
        }
    });
    return false; //阻止表单的默认提交行为。
});

</script>

<script>
    // 发布软件信息
        layui.use([ 'jquery', 'layer'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let MODULE_PATH = '/';
        document.getElementById('layui-btn-download').onclick = function() {
            var filename = $('#software_name').text(); // 获取软件名称
            // 获取下载次数
            var download_count_num = $('#download_count_num').text(); // 获取下载次数

            // 获取下载链接
            $.ajax({
            url: MODULE_PATH + 'software/download',
            data:{
                filename: filename,
                count:download_count_num
            },
            type: 'GET',
            contentType: 'application/json',
            success: function (result) {
                if (result.code === 200) {
                    $('#download_count_num').text(result.data.count);
                     window.location.href = result.data.url;
                } else {
                    layer.msg(result.msg, { icon: 2, time: 6000 });
                }
            },
            error: function (xhr, status, error) {
                layer.close(loading);
                layer.msg('请求失败，请稍后重试', { icon: 2, time: 6000 });
            }
        });
        }
        return false; //阻止表单的默认提交行为。
    });

    
</script>

</html>
